Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
j2c-plugin-prefix-browser
Advanced tools
Vendor prefix handling for j2c in the browser, built on top of Lea Verou's PrefixFree
This j2c plugin does client side vendor prefix insertion (and some polyfilling) for:
See below for a detailed feature set.
Unlike Autoprefixer and the inline-style-prefixer, it relies on feature detection rather than browser sniffing. It weights ~3KB minified and gzipped.
You test it live in your browser.
The plugin is well tested (385 assertions, many of which are deepEquals
on nested objects) and has 100% branch coverage (which doesn't mean it is bug free, off course).
$ npm install --save j2c-plugin-prefix-browser
#or
$ yarn add j2c-plugin-prefix-browser
import {prefixPlugin} from "j2c-plugin-prefix-browser"
import {J2c} from "j2c"
// alternatively
const prefixPlugin = require("j2c-plugin-prefix-browser").prefixPlugin
const J2c = require("j2c")
// anyways...
const j2c = new J2c(prefixPlugin())
j2c.sheet({
"@keyframes foo": {
from: {size: "100px"},
to: {size: "200px"}
}
})
/* Assuming that it ran in an old Safari version: */
@-webkit-keyframes foo_j2c-xxx {
from {
size: 100px;
}
to {
size: 200px;
}
}
Here's what supported, please file an issue if you see something missing.
Properties that need a prefix will get one. Properties supported both with and without won't.
The following values can get a prefix:
=> initial
cursor:
=> grab
, grabbing
, zoom-in
, zoom-out
display:
=> grid
, inline-grid
and the flexbox zoo (see below)
position:
=> sticky
width:
, column-width:
, height:
, max-height:
, max-width:
, min-height:
, min-width:
=> contain-floats
, fill-available
, fit-content
, max-content
and min-content
calc()
, element()
, cross-fade()
and gradients are prefixed, even if they are nested in other functions or part of a list of values.
Prefixed gradients also have their angle changed from trigonometric to clockwise coordinates.
transiton:
, transition-property:
and will-change:
take properties as arguments. The latter are prefixed where needed.
The plugin translates the final flexbox spec to its older versions as much as possible. Squigly arrows indicate an approximate mapping.
-moz-box
and -webkit-box
)align-content
=> ?
no mapping AFAIK please chime in if you know any)align-self
=> ?
align-items
=> -x-box-align
flex
=> -x-box-flex
flex-basis
=> ?
flex-direction
=> -x-box-direction
+ -x-box-orient
flex-flow
=> -x-box-direction
+ -x-box-orient
and/or -x-box-lines
flex-grow
=> ?
flex-shrink
=> ?
flex-wrap
=> -x-box-lines
justify-content
=> -x-box-pack
order
=> -x-box-ordinal-group
flex
=> -x-box
inline-flex
=> -x-inline-box
column
=> block-axis
+ normal
(respectively for -x-box-orient
and box-direction
)column-reverse
=> block-axis
+ reverse
row
=> inline-axis
+ normal
row-reverse
=> inline-axis
+ reverse
flex-end
=> end
flex-start
=> start
nowrap
=> single
space-around
~> justify
space-between
=> justify
wrap
=> multiple
wrap-reverse
~> multiple
-ms-flexbox
)align-content
=> -ms-flex-line-pack
align-items
=> -ms-flex-align
align-self
=> -ms-flex-item-align
flex
=> -ms-flex
flex-basis
=> -ms-preferred-size
flex-direction
=> -ms-flex-direction
flex-flow
=> -ms-flex-flow
flex-grow
=> -ms-flex-positive
flex-shrink
=> -ms-flex-negative
flex-wrap
=> -ms-flex-wrap
justify-content
=> -ms-flex-pack
order
=> -ms-flex-order
flex
=> -ms-flexbox
inline-flex
=> -ms-inline-flexbox
column
=> column
column-reverse
=> column-reverse
row
=> row
row-reverse
=> row-reverse
flex-end
=> end
flex-start
=> start
space-around
=> distribute
space-between
=> justify
wrap
=> wrap
wrap-reverse
=> wrap-reverse
-webkit-flex
)No special treatment is necessary, prefixes are applied normally where needed.
:any-link
=> :-x-any-link
:read-only
=> :-x-read-only
:read-write
=> :-x-read-write
::selection
=> ::-x-selection
:fullscreen
=> :-x-fullscreen
or :-x-fullscreen
::backdrop
=> ::-x-backdrop
::placeholder
=> ::-x-placeholder
, :-x-placeholder
:, ::-x-input-placeholder
or :-x-input-placeholder
The :-webkit-scrollbar
pseudo-element/pseudo-class family not implemented since it is webkit-only and not on a standard track AFAIK.
@keyframes
, @document
and @viewport
get a prefix where needed.
@media (min-resolution: 2dppx){}
(resp. max-resolution
and resolution
) can be converted to one of the following, when appropriate:
@media (-webkit-min-device-pixel-ratio:2){}
@media (min--moz-device-pixel-ratio:2){}
@media (-o-device-pixel-ratio 20/10){}
@media (min-resolution: 192dpi){} // Mostly IE
The parameters of @supports
have also their properties and values prefixed automatically.
The plugin supports a way to bypass the detection code and provide fixers
objects manually, but these would have to be constructed, either from the caniuse.com data set and cross-checking it by using our detector code with a service like SauceLabs, BrowserStack or Browserling.
That scheme would only work when the server knows the user agent. The plugin doesn't support inserting more than one prefix, or keeping the originals as Autoprefixer and inline-style-prefixer do. Thankfully, for that case (and until a proper DB is constructed), Autoprefixer can be used as a fallback.
The plugin is designed to be as fast as possible. Most of the feature detection is performed upfront to enable the fastest operation possible while applying prefixes. Allocations and branches are kept to a bare minimum after initialization (the prefixes are applied once and then cached). No objects beside strings are created while prefixing (with one exception when flex-flow
has to be translated to the 2009 equivalent, the value is .split(' ')
into an array.). Some tweaks are still possible, benchmarks will be needed.
Many thanks to Lea Verou for PrefixFree from which most of the feature detection code originates, Robin Frischmann for the inline-style-prefixer whose plugin folder was an inspiration, Andrey Sitnik for the Autoprefixer which is also a resource I've used while building this, and Ben Briggs who's always been helpful in the PostCSS-related chats.
Thanks as well to all the folks that hang out in the gitter channel for keeping my motivation up.
FAQs
Vendor prefix handling for j2c in the browser, built on top of Lea Verou's PrefixFree
The npm package j2c-plugin-prefix-browser receives a total of 48 weekly downloads. As such, j2c-plugin-prefix-browser popularity was classified as not popular.
We found that j2c-plugin-prefix-browser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.